<!DOCTYPE HTML>
<html>
<head>
<title>BI Apps - Edit Catalog Entry</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="../theme/css/style_reset.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/style_admin_tabs.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/button_content.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/form_content.css" />
<script type="text/JavaScript" src="../api/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../api/js/jquery.maxlength-min.js"></script>
<script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

<script type="text/javascript">

// otaism2a: 28,1,2014 to reduce multiple BOI.js while loading
var BOI = parent.BOI;

var report = {};
var layout = {};
var node_id;
var updateNode = true;
var report_base;
var ismessage=true;

$(document).ready(function () {
    $('#submit').live('click', function () {
        request();
    });
    $("#reset").live('click', function () {
        window.location.href = window.location.href;
    });
    //bind input change events for report info NODE_INFO
    $('form li[node] input[name], form li[node] textarea[name], form li[node] select[name]').live('change', function () {
        report[$(this).attr('name')] = $(this).val();
        if ($(this).attr("type") == "checkbox")
            if ($(this).is(':checked'))
                report[$(this).attr('name')] = "X";
            else
                report[$(this).attr('name')] = "";
    });
    //bind input change events for  LAYOUT_INFO
    $('form li[layout] input[name], form li[layout] textarea[name], form li[layout] select[name]').live('change', function () {
        layout[$(this).attr('name')] = $(this).val();
        //alert(layout[$(this).attr('name')] + ' =?= ' + $(this).val());
    });
    //bind checkbox change events
    $('#bi_var_list input').live('click', function () {
        $('#VAR_LIST').val('');
        var selections = "";
        $('#bi_var_list input').each(function () {
            if ($(this).is(':checked'))
                selections += $(this).val() + '|';
        });
        if (selections.indexOf('|') > -1)
            selections = selections.substr(0, selections.length - 1);
        $('#VAR_LIST').val(selections);
        $('#VAR_LIST').trigger('change');
    });
    //url BOX change event will autofill techname
    $('#URL').live('change', function () {
        var text = $(this).val();
        var tech_name = '';

        //only for BO, get their techname from url provided.
        if (text.indexOf('iDocID=') > -1 && $('#NODE_TYPE').val().indexOf('BO_') == 0)
            tech_name = BOI.BOIData.util.getParameterByName(text, 'iDocID');

        $('#TECH_NAME').val(tech_name);
    });
    if (parent.current_node)
        node_id = parent.current_node.key;
    load();
});

function request() //genereates request XML
{
    var record, class_name, method_name, req, param, done = 0;
    method_name = $('form:first').attr("METH_NAME");
    report['OPEN_STYLE'] = layout['OPEN_STYLE'];
    if (updateNode) //update NODE_INFO
    {
        record = new BOI.BOIData.Record();
        class_name = "ZCL_MYBW_REP_CATALOG";
        report['REP_DEFINITION'] = BOI.BOIData.util.htmlEncode(report['REP_DEFINITION']);

        for (var i in report) {
            //ANSAJ,SALEH,22/1/2014 ADD ENCODE CODE BEFORE PERFORMING A POST REQUEST
            if (i == "DESCRIPTION") {
                report["DESCRIPTION"] =unescape(report["DESCRIPTION"]);
                report["DESCRIPTION"] = encodeURIComponent(report["DESCRIPTION"]);

                param = new BOI.BOIData.Parameter();
                param.name = i;
                param.values = report[i] == null ? [ "" ] : [ report[i] ];
                record.parameters.push(param);
            }
            else if (i) {

                param = new BOI.BOIData.Parameter();
                param.name = i;
                param.values = report[i] == null ? [ "" ] : [ report[i] ];
                record.parameters.push(param);
            }
        }

        req = BOI.BOIData.request.prepare(class_name, method_name, [record]);

        BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
            if ($(data).find('MESSAGE').text() != ""){
                // alert($(data).find('MESSAGE').text());
                $("#TECH_NAME").val('');
                //   alert($(data).find('MESSAGE').text());
                BOI.BOILib.Util.log($(data).find('MESSAGE').text(),true);
                ismessage=false;
            }
            report['TECH_NAME'] = $(data).find('TECH_NAME').text();
            if(report['DATA_PROVIDER']==undefined){
                report['DATA_PROVIDER']=layout['DATA_PROVIDER'];
            }
            else {
                layout['DATA_PROVIDER']= report['DATA_PROVIDER'];
            }
            layout['TECH_NAME'] = report['TECH_NAME'];
            layout['APP_ID'] = report['APP_ID'];
            layout['REPORT_ID'] = report['TECH_NAME'];
            layout['NODE_TYPE'] = report['NODE_TYPE'];
            switch (report['NODE_TYPE']) {
                case "M_FOLDER":
                case "S_FOLDER":
                case "BW_ROLE":
                    parent.refresh(report['TECH_NAME'], method_name);
                    break;
                default:
                    // ANSAJ 2/FEB/2014 Add method for Show the message box while repeat tech name

                    if(ismessage){
                        saveLayout();
                    }
                    break;
            }
        });
    }
    else
        saveLayout();
}

//UPDATE LAYOUT_INFO
function saveLayout() {
    var record, class_name, method_name, req, param, done = 0;
    method_name = $('form:first').attr("METH_NAME");

    record = new BOI.BOIData.Record();
    class_name = "ZCL_MYBW_VAR_DEPENDENCY";

    for (var j in layout) {
        if (j) {
            param = new BOI.BOIData.Parameter();
            param.name = j;
            param.values = [layout[j]];
            record.parameters.push(param);
        }
    }

    if(report_base)
    {
        param = new BOI.BOIData.Parameter();
        param.name = 'REPORT_BASE';
        param.values = [report_base];
        record.parameters.push(param);
    }

    req = BOI.BOIData.request.prepare(class_name, method_name, [record]);

    BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
        parent.refresh(report['TECH_NAME'], method_name);
        if ($(data).find('MESSAGE').text() != '')
        // alert($(data).find('MESSAGE').text());
            BOI.BOILib.Util.log($(data).find('MESSAGE').text(),true);
    });
}

//initialization and rendering of report variables layout
function load() {
    var app_id, report_id, node_type, description, title, editable, url, parent_id, node_id, role, data_provider;
    app_id = parent.app_id;
    if (parent.current_node) {
        report_id = parent.current_node.data.key;
        node_type = parent.current_node.data.type;
        description = parent.current_node.data.description;
        //ANSAJ,SALEH,30/1/2014 ADD DECODE CODE After loading
        description = decodeURIComponent(description);
        title = parent.current_node.data.title;
        editable = parent.current_node.data.editable;
        url = parent.current_node.data.href;
        node_id = parent.current_node.data.nodeID;
        role = parent.current_node.data.role;
        report_base = parent.current_node.data.report_base;
        data_provider = parent.current_node.data.data_provider;
        //if(parent.current_node.getParent()) parent_id = parent.current_node.getParent().data.nodeID;
    }
    if (app_id == undefined)
        return;

    if (report_id == undefined) {
        checkBoxList($('#VAR_LIST'), []); //convert to CB List
        singleSelector($('#OPEN_STYLE'), "../data/bi_lookup_open_types.xml");

        $('form:first').attr("METH_NAME", "CREATE");
        $('#NODE_TYPE').val(node_type);
        $('#AUTH').val(role);
        report['PARENT_ID'] = node_id;
        report['APP_ID'] = app_id;
        report['TECH_NAME'] = "";
        report['TITLE'] = "New";
        report['DESCRIPTION'] = "New";
        report['NODE_TYPE'] = node_type;
        report['AUTH'] = role;
        report['DATA_PROVIDER'] = data_provider;
        report['DISPLAY_ORDER'] = "";

        //report['DATA_PROVIDER'] = data_provider;
        report['OPEN_STYLE'] = "";
        report['URL'] = "";

        layout['REPORT_ID'] = "";
        layout['NODE_TYPE'] = node_type;
        layout['DESCR'] = "";
        layout['VAR_LIST'] = "";
        layout['VAR_DEPENDS'] = "";
        layout['DATA_PROVIDER'] = data_provider;
        layout['QUERY_VARS'] = "";
        layout['VAR_TEMPLATE_ID'] = "";
        layout['KPI_TEMPLATE_ID'] = "";
        layout['QUERY_TEMPLATE'] ="";
        multiSelector($('#AUTH'));
        if (node_type == 'BO_DASHBOARD' || node_type == 'BW_DASHBOARD' || node_type =='BW_WAD3' || node_type =='BW_WAD7' || node_type =='KPI')
        {
            //multiSelector($('#TECH_NAME'), false);
            multiSelector($('#DATA_PROVIDER'), false);
        }
        populateDropDowns();

        setVisibility(node_type, editable);
        $('form').show();

        return;
    }

    //hide the form and show loading image
    $('form').hide();
    $('body').append(BOI.BOIData.render.loading(window.location.href));
    //load report details
    //    BOI.BOIData.read.getNode(app_id, report_id, function (data) {
    getReportNode (app_id, node_id, report_id, node_type, title , report_base, description, function (data) {
        $('#response').val(data);

        data = $(data);

        //set values
        var form = $('form').first();
        data.find('NODE_INFO').children().each(function () {
            var tag = $(this).get(0).tagName;
            form.find('#' + tag).val($(this).text());

            if (form.find('#' + tag).attr("type") == "checkbox")
                if ($(this).text() == "X")
                    form.find('#' + tag).attr("checked", "checked");

            report[tag] = $(this).text();
            //form.find('#' + tag).val($(this).text().replace(/|/g,"\n"));
        });

        //fetched values from tree
        $('#APP_ID').val(app_id);
        $('#NODE_TYPE').val(node_type);
        $('#TITLE').val(title);
        $('#DESCRIPTION').val(description);
        $('#DATA_PROVIDER').val(data_provider);

        $('#TECH_NAME').val(report_id);
        $('#URL').val(url);

        //set layout values
        data.find('LAYOUT_INFO').children().each(function () {
            var tag = $(this).get(0).tagName;
            form.find('#' + tag).val($(this).text());
            layout[tag] = $(this).text();
        });
        singleSelector($('#OPEN_STYLE'), "../data/bi_lookup_open_types.xml");
        multiSelector($('#AUTH'));
        if (node_type == 'BO_DASHBOARD' || node_type == 'BW_DASHBOARD' || node_type =='BW_WAD3' || node_type =='BW_WAD7' || node_type =='KPI')
        {
            //multiSelector($('#TECH_NAME'), false);
            multiSelector($('#DATA_PROVIDER'), false);
        }

        //set
        //render checkboxes
        var variables = data.find('LAYOUT_INFO QUERY_VARS').text();
        variables = variables.split('|');

        checkBoxList($('#VAR_LIST'), variables); //convert to CB List

        //set selection
        var varlist = data.find('LAYOUT_INFO VAR_LIST').text().split('|');
        for (var v in varlist) {
            if (varlist[v]) {
                $('#bi_var_list input[value="' + varlist[v] + '"]').attr('checked', true);
            }
        }

        $('#VAR_LIST').val('');
        var selections = "";
        $('#bi_var_list input').each(function () {
            if ($(this).is(':checked'))
                selections += $(this).val() + '|';
        });
        if (selections.indexOf('|') > -1)
            selections = selections.substr(0, selections.length - 1);
        $('#VAR_LIST').val(selections);
        $('#VAR_LIST').trigger('change');

        setVisibility(node_type, editable);

        if (!editable) {
            updateNode = false;
        }

        populateDropDowns();

        //show form
        $('body').find('.bi_loading').remove();
        $('form').fadeIn();

    }, $('#request'));
}

function getReportNode(app_id, node_id, report_id, node_type, title , report_base, description, fn){
    var record;
    if(report_base == "MENU_ROLE")
    {
        record = BOI.BOIData.data.createRecord({"APP_ID": [app_id], "NODE_ID": [node_id], "TECH_NAME": [report_id], "REPORT_TYPE": [node_type], "REPORT_BASE": [report_base], "TITLE": [title] });
        report["NODE_ID"] = node_id;
        report["TECH_NAME"] = report_id;
        report["APP_ID"] = app_id;
        report["NODE_TYPE"] = node_type;
        report["TITLE"] = title;
        report["REPORT_BASE"] = report_base;
    }
    else if(node_type)
        record = BOI.BOIData.data.createRecord({"APP_ID": [app_id], "TECH_NAME": [report_id], "REPORT_TYPE": [node_type]});
    else
        record = BOI.BOIData.data.createRecord({"APP_ID": [app_id], "TECH_NAME": [report_id]});
    var req = BOI.BOIData.request.prepare("ZCL_MYBW_REP_CATALOG", BOI.BOIData.actions.read, [record]);
//    if(debugIn) debugIn.val(req);
    BOI.BOIData.request.perform(req,"text","POST",fn);
}

function populateDropDowns() {
    //preload var templates options
    $('select#VAR_TEMPLATE_ID').append('<option value=""></option>');
    BOI.BOIData.list.getTemplates(parent.app_id, 'V', function (data) {
        $(data).find('TEMPLATE').each(function () {
            var option = '<option value="' + $(this).find('TEMPLATE_ID').text() + '">' + $(this).find('TEMPLATE_NAME').text() + '</option>';
            $('select#VAR_TEMPLATE_ID').append(option);
        });
        if (layout['VAR_TEMPLATE_ID'])
            $('select#VAR_TEMPLATE_ID').val(layout['VAR_TEMPLATE_ID']);
    });

    //preload kpi templates options
    $('select#KPI_TEMPLATE_ID').append('<option value=""></option>');
    BOI.BOIData.list.getTemplates(parent.app_id, 'K', function (data) {
        $(data).find('TEMPLATE').each(function () {
            var option = '<option value="' + $(this).find('TEMPLATE_ID').text() + '">' + $(this).find('TEMPLATE_NAME').text() + '</option>';
            $('select#KPI_TEMPLATE_ID').append(option);
        });
        if (layout['KPI_TEMPLATE_ID'])
            $('select#KPI_TEMPLATE_ID').val(layout['KPI_TEMPLATE_ID']);
    });
}

//transforms input element to a multivalue control
function multiSelector(element, valFn) {
    //element must be accept a val() and must be a JQuery Object
    //it must have a name attribute so it will be used.

    var elval = element.val();
    var elname = element.attr('name');

    var container = $('<div class="bi_ct"></div>');
    container = container.insertAfter(element);

    var clear = $('<div class="bi_clear"></div>');
    clear.insertAfter(container);

    container.append(element);

    var button = $('<input type="button" value="Add" />');
    button = container.append(button);

    var table = $("<table class='bi_ct_tbl'><tbody></tbody></table>");
    container.append(table);

    var data = $('<input type="hidden" name="' + elname + '" value="' + elval + '" />');
    container.append(data);

    element.removeAttr("name");

    var row = '<tr><td>{0}</td><td><span>Remove</span></td></tr>';
    //parse data
    var values = [];
    if (data.val())
        values = data.val().split('|');

    for (var i in values)
        if (values[i]) {
            var tr = row.replace('{0}', values[i]);
            table.find('tbody').append(tr);
        }

    element.val('');

    var add = function () {

        var evalue = element.val();
        if (evalue.trim().length == 0) return;

        var exists = false;
        table.find('td').each(function () {
            if ($(this).html() == evalue)
                exists = true;
        });
        if (exists) return;

        if (valFn == false) {
            var tr = row.replace('{0}', evalue);
            table.find('tbody').append(tr);

            //read values again
            refresh();
            element.val('');
            return;
        }
        //Perform validation here on element val
        BOI.BOIData.check.validateRole(evalue, function (result) {
            if (result) {
                var tr = row.replace('{0}', evalue);
                table.find('tbody').append(tr);

                //read values again
                refresh();
                element.val('');
            }
            else
            //alert('Role does not exist');
                BOI.BOILib.Util.log('Role does not exist',true);
        });
    };

    var refresh = function () {
        //read values again
        var newvals = "";
        data.val(newvals);

        table.find('tr').each(function () {
            newvals += $(this).find('td:first').html() + "|";
        });
        if (newvals.indexOf("|") > -1)
            newvals = newvals.substr(0, newvals.length - 1);

        data.val(newvals);
        data.trigger('change');
    };

    //bind events
    element.click(function (e) { return false; });
    element.keypress(function (e) {
        if (e.keyCode == 13) {
            // enter pressed
            add();
            return false;
        }
        else if (e.keyCode == 32) return false; //space
    });/**/

        //remove event
    $('.bi_ct_tbl span').live('click', function () {

        $(this).parent().parent().remove();

        //read values again
        refresh();
    });

    //add event
    button.on('click', add);

    return container;
}

//transforms input element to a select with custom value control
function singleSelector(element, dataUrl) {

    /*
     <?xml version="1.0"?>
     <response>
     <PARAM context="OPEN_STYLE">
     <ITEM><NAME>SAME WINDOW</NAME><VALUE>_SELF</VALUE></ITEM>
     <ITEM><NAME>NEW WINDOW</NAME><VALUE>_BLANK</VALUE></ITEM>
     <ITEM><NAME>CUSTOM WINDOW/IFRAME</NAME><VALUE>NO VALUE</VALUE></ITEM>
     </PARAM>
     </response>
     */

    //preload open style options
    BOI.BOIData.lookup.getOpenStyles(
            function (options) {
                var elval = element.val();
                var elname = element.attr('name');

                var container = $('<div class="bi_ct"></div>');
                container = container.insertAfter(element);

                var clear = $('<div class="bi_clear"></div>');
                clear.insertAfter(container);

                var div = $('<div style="height:10px;"></div>');
                var span = $('<span>Specify: </span>');
                container.append(div);
                container.append(span);
                container.append(element);

                var dropdown = $('<select></select>');
                $(options).find('ITEM').each(function () {
                    var option = "<option value='" + $(this).find('VALUE').text() + "'>" + $(this).find('NAME').text() + "</option>";
                    dropdown.append(option);
                });
                dropdown.insertBefore(div);

                var data = $('<input type="hidden" name="' + elname + '" value="' + elval + '" />');
                container.append(data);

                //pre select
                if (elval && elval.length > 0) {
                    data.val(elval);
                    var found = false;
                    dropdown.find('option').each(function () {
                        //loop over options to see if value exists to preselect it
                        if ($(this).val() == elval) {
                            found = true;
                            dropdown.val(elval);
                        }
                    });
                    if (!found) {
                        dropdown.val("");
                        element.show();
                        span.show();
                    }
                    else {
                        element.hide();
                        span.hide();
                    }
                    data.trigger('change');
                }
                else //no value
                {
                    dropdown.val("");
                    data.val('');
                    element.show(); span.show();
                    data.trigger('change');
                }
                //bind change event
                dropdown.on('change', function () {
                    if (dropdown.val() == dropdown.find('option').last().val()) //if last element then show custom box
                    {
                        element.show(); span.show();
                        data.val(element.val());
                    }
                    else {
                        element.hide(); span.hide();
                        data.val(dropdown.val());
                    }
                    data.trigger('change');
                });
                //bind text modify
                element.on('keyup', function () {
                    data.val(element.val());
                    data.trigger('change');
                });
                return container;
            }
    );
}
function checkBoxList(input, data) {
    var container = $('<div id="bi_var_list"></div>');
    container.insertAfter(input);
    container.append('<ul></ul>')
    for (var i in data) {
        if (data[i])
        {
            var cb = "<li><input type='checkbox' value='" + data[i] + "' />" + data[i] + '</li>';
            container.append(cb);
        }
    }
}
function setVisibility(node_type, editable) {
    switch (node_type) //what to show
    {
        case "S_FOLDER":
        case "M_FOLDER":
        case "BW_ROLE":
            $('form:first ul li').each(function () {
                var element = $(this).find('[name]').attr('name');
                switch (element) {
                    case 'APP_ID':
                    //case 'NODE_TYPE':
                    case 'URL':
                    case 'VAR_TEMPLATE_ID':
                    case 'KPI_TEMPLATE_ID':
                    case 'DATA_PROVIDER':
                    case 'OPEN_STYLE':
                    case 'VAR_LIST':
                    case 'VARIABLE_SCREEN':
                    case 'KPI_DRL_DOWN_URL':
                        $(this).hide();
                        break;
                    default:
                        if (node_type != "BW_ROLE" && element == "TECH_NAME") $(this).hide();
                        if (!editable)
                            $(this).find('input[type="text"],select,textarea').attr('readonly', 'readonly');
                        break;
                }

            });
            if (!editable) {
                $('form:first').find('input[type="text"],select,textarea').attr('readonly', 'readonly');
                $('form:first').find('input[type="button"],input[type="submit"]').hide();
            }
            break;
        case "REPORT_GROUP":
            $('form:first ul li').each(function () {
                switch ($(this).find('[name]').attr('name')) {
                    case 'APP_ID':
                    //case 'NODE_TYPE':
                    //case 'AUTH':
                    case 'URL':
                    //case 'DISPLAY_ORDER':
                    case 'DATA_PROVIDER':
                    case 'VAR_LIST':
                    case 'KPI_DRL_DOWN_URL':

                        $(this).hide();
                        break;
                    case 'TECH_NAME':
                        $(this).find('input').attr('readonly', 'readonly');
                        break;
                }
            });
            break;
        case "URL":
            $('form:first ul li').each(function () {
                var name = $(this).find('[name]').attr('name');
                switch (name) {
                    case 'APP_ID':
                    //case 'NODE_TYPE':
                    case 'VAR_TEMPLATE_ID':
                    case 'KPI_TEMPLATE_ID':
                    case 'DATA_PROVIDER':
                    //case 'OPEN_STYLE':
                    case 'VAR_LIST':
                    case 'VARIABLE_SCREEN':
                    case 'KPI_DRL_DOWN_URL':
                        $(this).hide();
                        break;
                    case 'AUTH':
                    case 'DISPLAY_ORDER':
                        if (!editable) $(this).hide();
                        break;

                    default:
                        if (!editable) {
                            $(this).find('input[type="text"],select,textarea').attr('readonly', 'readonly');
                            $(this).find('#OPEN_STYLE').removeAttr('readonly');
                        }
                        break;
                }
            });
            break;
        default:
            $('form:first ul li').each(function () {
                var name = $(this).find('[name]').attr('name');
                switch (name) {
                    case 'APP_ID':
                    //case 'NODE_TYPE':
                    case 'KPI_TEMPLATE_ID':
                        $(this).hide();
                        break;
                    case 'VAR_TEMPLATE_ID':
                        //if(parent.current_node.getParent().data.type == 'REPORT_GROUP')
                        //    $(this).hide();
                        break;

                    case 'AUTH':
                    case 'DISPLAY_ORDER':
                        //Edited by jaroudnh on 2/31/2014 to show authorization if webi
                        //if (!editable || node_type == 'BO_WEBI') $(this).hide();
                        break;

                    default:
                        if (!editable) {
                            $(this).find('input[type="text"],select,textarea').attr('readonly', 'readonly');
                            $(this).find('#OPEN_STYLE').removeAttr('readonly');
                            $(this).find('#VAR_TEMPLATE_ID').removeAttr('readonly');
                        }
                        break;
                }
            });
            break;
    }
}
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#DESCRIPTION').maxlength({
            events:[], // Array of events to be triggerd
            maxCharacters:201, // Characters limit
            status:true, // True to show status indicator bewlow the element
            statusClass:"status", // The class on the status div
            statusText:"character left", // The status text
            notificationClass:"notification", // Will be added when maxlength is reached
            showAlert:false, // True to show a regular alert message
            alertText:"You have typed too many characters.", // Text in alert message
            slider:false
            // True Use counter slider
        });
        // saleh 27,1,2014 for description coloring if max characters is reached
        $("#DESCRIPTION").keyup(function () {
            if ($("#DESCRIPTION").val().length == 201) {
                $("#DESCRIPTION")[0].style.backgroundColor = "LightCoral";
            }
            else if ($("#DESCRIPTION").val().length <= 200 && $("#DESCRIPTION").val().length >= 0) {
                $("#DESCRIPTION")[0].style.backgroundColor = "";
            }
        });
    });
</script>
</head>
<body>
<div class="tab-frame bi_admin_report_edit">
    <form method="post" meth_name="UPDATE" style="display: none;">
        <h2>BI Apps - Edit Catalog Entry</h2>
        <ul>
            <li node="1">
                <label for="APP_ID">App ID:</label><input id="APP_ID" name="APP_ID" type="text" readonly="readonly" /></li>

            <li node="1">
                <label for="NODE_TYPE">Type:</label><input id="NODE_TYPE" name="NODE_TYPE" type="text" readonly="readonly" /></li>
            <li node="1">
                <label for="TITLE">Title:</label><input id="TITLE" name="TITLE" type="text" /></li>
            <li node="1">
                <label for="DESCRIPTION">Description:</label><textarea rows="3" id="DESCRIPTION" name="DESCRIPTION"></textarea></li>
            <li node="1">
                <label for="TECH_NAME">Technical Name:</label><input id="TECH_NAME" name="TECH_NAME" type="text" /></li>
            <li node="1">
                <label for="URL">URL:</label><input id="URL" name="URL" type="text" /></li>
            <li layout="1">
                <label for="VAR_TEMPLATE_ID">Variables Template:</label><select id="VAR_TEMPLATE_ID" name="VAR_TEMPLATE_ID"></select></li>
            <li layout="1">
                <label for="KPI_TEMPLATE_ID">KPIs Template:</label><select id="KPI_TEMPLATE_ID" name="KPI_TEMPLATE_ID"></select></li>
            <li layout="1">
                <label for="DATA_PROVIDER">Data Provider:</label><input id="DATA_PROVIDER" name="DATA_PROVIDER" type="text" /></li>
            <li node="1">
                <label for="AUTH">Authorization:</label><input type="text" id="AUTH" name="AUTH" /></li>
            <li layout="1">
                <label for="OPEN_STYLE">Open Style:</label><input id="OPEN_STYLE" name="OPEN_STYLE" type="text" /></li>
            <li node="1">
                <label for="DISPLAY_ORDER">Display Order:</label><input id="DISPLAY_ORDER" name="DISPLAY_ORDER" type="text" onkeypress="if (event.keyCode < 48 || event.keyCode > 57) return false;" /></li>
            <li node="1">
                <label for="REP_DEFINITION">Report Definition:</label><textarea rows="3" id="REP_DEFINITION" name="REP_DEFINITION"></textarea></li>

            <li node="1">
                <label for="VARIABLE_SCREEN">Always Show Variable Screen:</label><div class="input-hidden" style="text-align: left">
                <input id="VARIABLE_SCREEN" name="VARIABLE_SCREEN" type="checkbox" />
            </div>
            </li>
            <li node="1">
                <label for="KPI_DRL_DOWN_URL">Drill Down URL:</label><input id="KPI_DRL_DOWN_URL" name="KPI_DRL_DOWN_URL" type="text" /></li>
            <li node="1">
                <label for="QUERY_TEMPLATE">Query Template:</label><input id="QUERY_TEMPLATE" name="QUERY_TEMPLATE" type="text"/></li>
            <li layout="1">
                <label for="VAR_LIST">Include Variables:</label><div class="input-hidden">
                <input id="VAR_LIST" name="VAR_LIST" type="hidden" />
            </div>
            </li>

            <li>
                <a id="submit" class="button-content-YW" href="#"><span>Save</span></a>
            </li>
        </ul>
    </form>
</div>
</body>
</html>